<script lang="ts" setup>
import { message } from 'ant-design-vue';
// @ts-ignore
import { useArticleStore } from '@/common/stores/modules/article';
import router from '@/router';
import breaks from "@bytemd/plugin-breaks";
import externalLinks from "@bytemd/plugin-external-links";
import footnotes from "@bytemd/plugin-footnotes";
import frontmatter from "@bytemd/plugin-frontmatter";
import gemoji from "@bytemd/plugin-gemoji";
import gfm from "@bytemd/plugin-gfm";
import pluginGfmZhHans from "@bytemd/plugin-gfm/locales/zh_Hans.json";
import highlight from "@bytemd/plugin-highlight";
import math from "@bytemd/plugin-math";
import pluginMathZhHans from "@bytemd/plugin-math/locales/zh_Hans.json";
import mediumZoom from "@bytemd/plugin-medium-zoom";
import mermaid from "@bytemd/plugin-mermaid";
import pluginMermaidZhHans from "@bytemd/plugin-mermaid/locales/zh_Hans.json";
import zhHans from "bytemd/locales/zh_Hans.json";

const articleStore = useArticleStore()

const plugins = [
  gfm({ locale: pluginGfmZhHans }),
  highlight(),
  mediumZoom(),
  gemoji(),
  math({ locale: pluginMathZhHans }),
  mermaid({ locale: pluginMermaidZhHans }),
  breaks(),
  footnotes(),
  frontmatter(),
  externalLinks({ test: href => true })
]

const title = ref<string>('');   // 标题
const content = ref("")  // content
const modalText = ref<string>('你确定要发布么！');
const open = ref<boolean>(false);
const coverImage = ref('') // Base64 图片

// 定义一个变量来存储当前选中的索引值
const selectedIndex = ref(0)

// 分类标签数据
const classify = ref([
  { id: 1, name: '后端' },
  { id: 2, name: '前端' },
  { id: 3, name: 'Android' },
  { id: 4, name: 'iOS' },
  { id: 5, name: '人工智能' },
  { id: 6, name: '开发工具' },
  { id: 7, name: '代码人生' },
  { id: 8, name: '阅读' },
])

function handleChange(val: string) {
  content.value = val
}
function uploadImages() { }

const customamodal = () => {
  // 显示弹窗
  open.value = true;
}

// 分类点击事件
const onclassify = (index: number) => {
  const selectedData = classify.value[index]
  // 更新选中的索引值
  selectedIndex.value = index;
  console.log(index)
  console.log(selectedData.name)

  // 将选中的分类名称存储起来，以便后续传入addArticle函数
  const selectedClassify = selectedData.name;
}

// 二次确认
const onClose = () => {
  // 判断数据是否为空
  if (title.value && content.value && coverImage.value) {
    // 模拟数据处理中
    modalText.value = '数据处理中！！！';
    // 模拟发布响应时间
    setTimeout(() => {
      open.value = false;
      router.push('/technicalarticles')
      message.success('发布成功');


      // 获取当前选中的分类信息
      const selectedClassify = classify.value[selectedIndex.value].name;

      // 发布成功储存数据
      articleStore.addArticle(title.value, content.value, selectedClassify, coverImage.value); // 调用 addArticle
      open.value = false;
    }, 1000);
  } else {
    message.error('标题或内容为空。');
  }

};

// 点击取消
const showDrawer = () => {
  open.value = false;
};

</script>



<template>
  <div class="educ-custom">
    <div class="educ-custom-title">
      <a-input class="educ-custom-title-input" v-model:value="title" :bordered="false" placeholder="请输入文章标题"
        :maxlength="40" />
      <a-button @click="customamodal" type="primary">发布</a-button>
    </div>
    <Editor id="d-Editor" class="editor" :locale="zhHans" :plugins="plugins" :uploadImages="uploadImages"
      :value="content" mode="split" placeholder="请输入内容..." @change="handleChange" />

    <a-drawer :width="500" v-model:open="open" root-class-name="root-class-name" :root-style="{ color: 'blue' }"
      style="color: red" title="发布文章" placement="right" @close="showDrawer">
      <template #extra>
        <a-button style="margin-right: .5rem" @click="showDrawer">取消</a-button>
        <a-button type="primary" @click="onClose">确认</a-button>
      </template>
      <!-- 分类 -->
      <a-form-item class="educ-custom-classify" label="分类标签">
        <div class="educ-custom-classify-h4" :class="{ 'active': selectedIndex === index }" @click="onclassify(index)"
          v-for="(item, index) in classify" :key="index">
          {{ item.name }}
        </div>
      </a-form-item>
      <!-- 文章封面 -->
      <educ-upload v-model:coverImage="coverImage" />
    </a-drawer>
  </div>
</template>




<style lang="scss" scoped>
.educ-custom {
  padding: 0;
  margin: 0;

  &-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-input {
      font-size: 1.5625rem;
    }
  }

  &-classify {
    display: flex;
    flex-wrap: wrap;

    /* 允许内容换行 */
    align-items: center;

    &-h4 {
      /* 确保每个标签按内容宽度排列 */
      display: inline-block;
      padding: .3125rem 2.1875rem;

      /* 添加间距 */
      margin: .3125rem;

      /* 避免单个标签内部换行 */
      white-space: nowrap;
      cursor: pointer;
      background-color: #f4f5f5;

      /* 可选，添加圆角效果 */
      border-radius: .25rem;
    }
  }



}

// 选中时的样式
.active {
  color: #00a6ed;
  background-color: #e8f3ff;
}


// 输入框文字大小 左
.bytemd-editor .CodeMirror .CodeMirror-lines {
  font-size: 1.25rem;
}

.editor {
  width: 100%;
  height: 100vh;

  // 输入框文字大小  右
  font-size: 1.25rem;
}

::v-deep .bytemd {
  width: 100%;
  height: 100vh;
}
</style>
